<!-- 风险信息 -->
<template>
  <div class="risk-info-box">
    <div class="result-box">
      <span class="result-l">智能评估结果：</span><span class="result-r green">及格</span>
    </div>
    <div class="mark-box">
      <div class="chart-box flex-center">
        <!-- 雷达图 -->
        <div ref="container" id="container"></div>
      </div>
      <div class="score-box">
        <div class="title">该供应商风险评估分</div>
        <div class="num">68</div>
        <div class="tag">
          <div class="tag-item">债务/债权 2</div>
          <div class="tag-item">风险关系 3</div>
          <div class="tag-item">竞争风险 1</div>
          <div class="tag-item">竞争风险 1</div>
        </div>
      </div>
    </div>
    <div class="risk-box">
      【综合解读】企业规模人数：98人，注册资本：100万，存在债务/债权问题 2个，风险关系问题 3个，竞争风险问题 1个，存在债务/债权问题 2个，风险关系问题 3个，竞争风险问题 1个。
    </div>
  </div>
</template>

<script>
import { Chart } from '@antv/g2';

export default {
  name: 'RiskInfo',
  data() {
    return {
      radarData: [
        { label: '注册资本', type: '曲线1', value: 42 },
        { label: '注册资本', type: '曲线2', value: 64 },
        { label: '关联风险', type: '曲线1', value: 58 },
        { label: '关联风险', type: '曲线2', value: 42 },
        { label: '经营风险', type: '曲线1', value: 42 },
        { label: '经营风险', type: '曲线2', value: 61 },
        { label: '司法案件', type: '曲线1', value: 100 },
        { label: '司法案件', type: '曲线2', value: 88 },
        { label: '企业规模', type: '曲线1', value: 60 },
        { label: '企业规模', type: '曲线2', value: 42 },
      ]
    };
  },
  mounted() {
    this.initRadarChart();
  },
  methods: {
    initRadarChart() {
      const chart = new Chart({
        container: 'container',
        autoFit: true,
        width: 320,
        height: 320
      });

      chart.options({
        coordinate: {
          type: 'polar',
        },
        data: this.radarData,
        children: [
          {
            type: 'line',
            style: {
              zIndex: 0,
              lineWidth: 2,
              lineJoin: 'round',
            },
            encode: {
              x: { type: 'field', value: 'label' },
              y: { type: 'field', value: 'value' },
              color: { type: 'field', value: 'type' },
            },
            legend: false,
            scale: {
              x: { padding: 0.5, align: 0 },
              y: { domainMin: 0, domainMax: 100 },
              color: { range: ['#2478F2', '#84B7F9'] },
            },
            axis: {
              x: {
                title: false, // 关闭标题或设置标题内容
                grid: false, // 是否显示网格线
                gridLineWidth: 1, // 网格线宽度
                gridLineDash: [0, 0], // 实线
                tick: false, // 是否显示刻度
                labelFontSize: 14,
              },
              y: {
                title: false, // 关闭标题或设置标题内容
                gridConnect: 'line',
                gridLineWidth: 1, // 网格线宽度
                gridLineDash: [0, 0], // 实线
                label: false, // 是否显示刻度值
                gridAreaFill: 'rgba(0, 0, 0, 0.04)',
              }
            },
              tooltip: null
          },
          {
            type: 'point',
            encode: {
              x: { type: 'field', value: 'label' },
              y: { type: 'field', value: 'value' },
              color: { type: 'field', value: 'type' },
              shape: 'point',
              size: 3,
              tooltip: null
            },
          }
        ]
      });
      
      // chart
      //   .data(this.radarData)
      //   .scale('x', { padding: 0.5, align: 0 })
      //   .scale('y', { tickCount: 5, domainMin: 0, domainMax: 100 })
      //   .axis('x', {
      //     grid: true,
      //     gridLineWidth: 1,
      //     tick: false,
      //     gridLineDash: [0, 0],
      //   })
      //   .axis('y', {
      //     titleOpacity: '0',
      //     gridConnect: 'line',
      //     gridLineWidth: 1,
      //     gridLineDash: [0, 0],
      //     gridAreaFill: 'rgba(0, 0, 0, 0.04)',
      //   });

      // // 绘制线
      // chart
      //   .line()
      //   .encode('x', 'item')
      //   .encode('y', 'score')
      //   .encode('color', 'type')
      //   .style('lineWidth', 1);

      // // 绘制点
      // chart
      //   .point()
      //   .encode('x', 'item')
      //   .encode('y', 'score')
      //   .encode('color', 'type')
      //   .encode('shape', 'point')
      //   .encode('size', 3)
      //   .tooltip(null);

      chart.render();
    }
  }
}
</script>

<style lang="less" scoped>
.risk-info-box {
  margin: 20px 25px;
}

.result-box {
  height: 50px;
  line-height: 50px;
  border-radius: 4px;
  background-color: rgba(239, 246, 253, 1);
  color: rgba(16,16,16,1);
  text-align: center;
  border: 2px solid rgba(31, 127, 227, 1);
  .result-l {
    font-size: 16px;
  }
  .result-r {
    font-size: 20px;
  }
  .green {
    color: green;
  }
}

.mark-box {
  display: flex;
  align-items: center;
  .chart-box {
    width: 60%;
    height: 100%;
  }
  .score-box {
    text-align: center;
    width: 40%;
    height: 100%;
    .title {
      color: rgba(79, 79, 79, 1);
      font-size: 16px;
    }
    .num {
      color: rgba(79, 79, 79, 1);
      font-size: 48px;
    }
    .tag {
      display: flex;
      justify-content: space-evenly;
      flex-wrap: wrap;
      .tag-item {
        width: 45%;
        border-radius: 30px;
        background-color: rgba(255, 226, 228, 1);
        color: rgba(255,68,68,1);
        font-size: 14px;
        text-align: center;
        padding: 4px 15px;
        margin-bottom: 10px;
      }
    }
  }
}

.risk-box {
  background-color: rgba(255, 255, 255, 1);
  border-top: 1px solid rgba(187, 187, 187, 1);
  padding: 15px 0;
}
</style>